{{if  .Site.Params.color_main}}
$color_main : {{ .Site.Params.color_main  }}  ;
{{else}}
$color_main : hsl(random(360)-1, random(100)-1%, 45%);
{{end}}



$c_dark1 : darken($color_main, 15%);  


.autocomplete-suggestions{
    background-color: lighten($color_main, 50%)!important;
    height: 100vh;
}
article>aside {
    /*background-color: $c_light3;*/
    background-color: transparentize($color_main,0.9);
    background-color: lighten($color_main,50%);
    padding: 2rem 0rem 1rem 0rem;
    

    div.search{
        position: absolute;
        left: 0px;
        top: 0px;
        width: calc(100%);
        input {
            padding: 3px 25px;
            width: 100%;
            height: 2rem;
            border: 0px;
            background-color: transparentize($color_main,0.9);
            border-bottom: 1px solid transparentize($color_main,0.8);
        }
    }


    .menu {
        list-style-type: none;
        line-height: 2rem;
        margin-top: 2rem;
        ul {
            display: none;
        } 
        .ddexp{
            cursor: pointer;
        }
        // first menu level
        >.dd-item {
            margin-top: 24px;
                >a{
                    font-weight: 700;
                    font-size: 16px;
                }
                > i {
                    color:darken($color_main,6);
                    position: absolute;
                    left:21px;
                    font-size: 1em;
                    font-size: 20px;
                    line-height: inherit;

                }
        } 

        // menu items
        .dd-item {
            padding: 10px 0px 10px 16px;
            
            list-style: none;
            a {
                text-decoration: none;
            }
            >a{
                line-height: 20px;
                font-size: 14px;
                /*color: rgb(110, 119, 122);*/
                /*color:$color_main;*/
                
                color: darken($color_main,6);
                
                
            }
            > i {
                    color:darken($color_main,6);
            }
            ul {
                padding-inline-start: 0px;
            }
            li {
                /*border-left: 1px solid #eee;*/
            }

            &.haschildren{
                &.parent{
                    >a {
                       font-weight: 600                        
                    }
                }
            }

            &.parent{
                >a {
                 
                }
                >ul {
                    display: block;
                }
            }


            &.active {
                background-color: transparentize($color_main,0.9);
                
                &.haschildren {
                    /*background-color: transparent;*/

                    > a {
                        font-weight: 700                        
                    }
                }

                >a{
                    color:$c_dark1;
                }

                >ul {
                    display: block;
                }
                >div {
                    background-color: $c_dark1;
                    * {
                        font-weight: bold;
                        border-bottom: dotted 1px red;
                    }
                }
            }

            
            &.alwaysopen>ul {
                display: block
            }
            
            &.parent>ul {
                display: block
            }

   

        }
    }

    section {
        margin: 2rem 0rem;
    }
}

body{
    a{
        text-decoration: none;
    }
}

